<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>库品报表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../css/index.css">
</head>
<style>
    #container1 {
        width: 25rem;
        height: 15rem;
    }

    #container2 {
        width: 30rem;
        height: 15rem;
    }
</style>

<body>
    <div id="app" class="minWidth">
        <el-form ref="form" :model="form" label-width="80px" style="display: flex;">
            <el-form-item label="商品名:">
                <el-input @change="SelectGoods" v-model="form.Article_Name" placeholder="请输入商品名"></el-input>
            </el-form-item>
            <el-form-item label="仓库:">
                <el-select @change="ChangeWare" v-model="form.Warehouse_SerialNumber" clearable placeholder="请选择仓库">
                    <el-option v-for="item in Wares" :key="item.Warehouse_SerialNumber" :label="item.Warehouse_Name" :value="item.Parent_Warehouse_SerialNumber==''?item.Warehouse_SerialNumber:item.Parent_Warehouse_SerialNumber">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类别名称:">
                <el-select @change="ChangeCategory" v-model="form.Category_SerialNumber" clearable placeholder="请选择类别名称">
                    <el-option v-for="item in Category" :key="item.Category_SerialNumber" :label="item.Category_Name" :value="item.Category_SerialNumber">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="padding: 20px;display: flex;justify-content: space-around;">
            <el-card style="background-color: antiquewhite;display: flex;justify-content: center;align-items: center; width: 20rem;" shadow="hover">
                <span style="font-weight: bold;font-size: 1.5rem;">仓库明细:</span>
                <div style="display: flex;flex-direction: column;justify-content: center;flex: 1;">
                    <div>
                        <span>出库量:</span>
                        <span>{{statistics.Out_Total_Quantity}}</span>
                    </div>
                    <div>
                        <span>入库量:</span>
                        <span>{{statistics.Receipt_Quantity}}</span>
                    </div>
                    <div v-if="JSON.parse(sessionStorage.getItem('RoleArr')).some(item=>item=='B0070')">
                        <span>仓库剩余商品总金额:</span>
                        <span>￥{{Pricethousands(statistics.Amount)}}</span>
                    </div>
                </div>
            </el-card>
            <div id="container1"></div>
            <div id="container2"></div>
        </div>
        <el-table :data="tableData" stripe border height="calc(65vh - 140px)" style="width: 100%">
            <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
            <el-table-column align="center" prop="Article_Name" label="商品名称" width="180"></el-table-column>
            <el-table-column align="center" prop="Category_Name" label="类别名称"></el-table-column>
            <el-table-column align="center" prop="Remain_Quantity" label="库存量"></el-table-column>
            <el-table-column align="center" prop="Inventory_Total_Quantity" label="验收数量"></el-table-column>
            <el-table-column align="center" prop="Inventory_Total_Quantity" label="入库数量"></el-table-column>
            <el-table-column align="center" prop="Out_Total_Quantity" label="出库数量"></el-table-column>
        </el-table>
        <el-pagination background v-show="total > 0" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10,50,100,500,1000]"
            :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script type="text/javascript" src="../../../js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/InventoryReports.js"></script>
</body>

</html>